<template>
	<view style="padding-top: 20px;">
		<div class="couponStyle" v-for="item in couponsList" :key="item.discount.id">
		        <div class="stamp stamp02">
		          <div class="par">
		            <p>{{item.name}}</p>
		            <!-- <sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub> -->
		            <p>{{item.about}}</p>
		            <p>{{item.discount.belong == null ? "未使用" : "已使用"}}</p>
		          </div>
		          <div class="copy">
		            副券
		            <p>{{item.discount.pickTime.split(" ")[0]}}</p>
		          </div>
		          <i></i>
		        </div>
		      </div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				couponsList: [{
					"about": "名下无车位，即可享受85折优惠价",
					"name": "新人折扣券",
					"discount": {
						"id": 1009,
						"code": "NewUser",
						"belong": "111111",
						"order": null,
						"pickTime": "2021/8/23",
						"arg": "0"
					}
				}, {
					"about": "名下无车位，即可享受85折优惠价",
					"name": "新人折扣券",
					"discount": {
						"id": 1010,
						"code": "NewUser",
						"belong": "111111",
						"order": null,
						"pickTime": "2021/8/22 14:10:30",
						"arg": null
					}
				}, {
					"about": "抵扣券,抵扣价格根据优惠券参数定义",
					"name": "折扣抵金券",
					"discount": {
						"id": 1011,
						"code": "OpenCut",
						"belong": "111111",
						"order": 1014,
						"pickTime": "2021/8/22 14:13:12",
						"arg": "8000"
					}
				}]

			};
		}
	}
</script>

<style lang="scss" scoped>
.couponStyle {
  margin-bottom: 30px;
}
.stamp * {
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: "Microsoft YaHei", "Source Code Pro", Menlo, Consolas, Monaco,
    monospace;
}
.stamp {
  width: 500rpx;
  height: 150rpx;
  padding: 0 12px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}
.stamp:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10rpx;
  right: 10rpx;
  z-index: -1;
}
.stamp i {
  position: absolute;
  left: 30%;
  top: 45px;
  height: 190rpx;
  width: 390rpx;
  background-color: rgba(255, 255, 255, 0.15);
  transform: rotate(-30deg);
}
.stamp .par {
  float: left;
  padding: 16rpx 15rpx;
  width: 150px;
  border-right: 2px dashed rgba(255, 255, 255, 0.3);
  text-align: left;
}
.stamp .par p {
  color: #fff;
  font-size: 12px;
  line-height: 16px;
}
.stamp .par span {
  font-size: 50rpx;
  color: #fff;
  margin-right: 5px;
  line-height: 65px;
}
.stamp .par .sign {
  font-size: 34px;
}
.stamp .par sub {
  position: relative;
  top: -5px;
  color: rgba(255, 255, 255, 0.8);
}
.stamp .copy {
  display: inline-block;
  padding: 21rpx 14rpx;
  width: 100rpx;
  vertical-align: text-bottom;
  font-size: 18px;
  color: rgb(255, 255, 255);
  text-align: center;
  line-height: initial;
}
.stamp .copy p {
  font-size: 12px;
  margin-top: 5px;
}
.stamp02 {
  background: radial-gradient(transparent 0, transparent 5rpx, #d24161 5rpx);
  background-size: 15rpx 15rpx;
  background-position: 9rpx 3rpx;
}
.stamp02:before {
  background-color: #d24161;
}
</style>
